<template>
  <Header :class="getHeaderClass">
    <!-- left start -->
    <div :class="`${prefixCls}-left`">
      <!-- logo -->
      <AppLogo
        v-if="getShowHeaderLogo || getIsMobile"
        :class="`${prefixCls}-logo`"
        :theme="getHeaderTheme"
        :style="getLogoWidth"
      />
      <LayoutTrigger
        v-if="
          (getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
        "
        :theme="getHeaderTheme"
        :sider="false"
      />
      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
    </div>
    <!-- left end -->

    <!-- menu start -->
    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
      <LayoutMenu
        :isHorizontal="true"
        :theme="getHeaderTheme"
        :splitType="getSplitType"
        :menuMode="getMenuMode"
      />
    </div>
    <!-- menu-end -->

    <!-- action  -->
    <div :class="`${prefixCls}-action`">
      <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
      <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
      <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
      <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
      <AppLocalePicker
        v-if="getShowLocalePicker"
        :reload="true"
        :showText="false"
        :class="`${prefixCls}-action__item`"
      />
      <UserDropDown :theme="getHeaderTheme" />
      <AppDarkModeToggle class="mx-auto" />
      <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`"  />
    </div>
  </Header>
</template>
<script lang="ts">
import { defineComponent, unref, computed } from "vue";
import { propTypes } from "/@/utils/PropTypes";
import { Layout } from "ant-design-vue";
import { AppLogo } from "/@/components/general/Application";
import LayoutMenu from "../menu/index.vue";
import LayoutTrigger from "../trigger/index.vue";
import { AppSearch } from "/@/components/general/Application";
import { useHeaderSetting } from "/@/hooks/setting/UseHeaderSetting";
import { useMenuSetting } from "/@/hooks/setting/UseMenuSetting";
import { useRootSetting } from "/@/hooks/setting/UseRootSetting";
import { MenuModeEnum, MenuSplitTyeEnum } from "/@/enums/MenuEnum";
import { SettingButtonPositionEnum } from "/@/enums/AppEnum";
import { AppLocalePicker } from "/@/components/general/Application";
import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from "./components";
import { useAppInject } from "/@/hooks/web/UseAppInject";
import { useDesign } from "/@/hooks/web/UseDesign";
import { createAsyncComponent } from "/@/utils/factory/CreateAsyncComponent";
import { useLocale } from "/@/i18n/UseLocale";
import AppDarkModeToggle from "/@/components/general/Application/src/AppDarkModeToggle.vue";

export default defineComponent({
  name: "LayoutHeader",
  components: {
    AppDarkModeToggle,
    Header: Layout.Header,
    AppLogo,
    LayoutTrigger,
    LayoutBreadcrumb,
    LayoutMenu,
    UserDropDown,
    AppLocalePicker,
    FullScreen,
    Notify,
    AppSearch,
    ErrorAction,
    SettingDrawer: createAsyncComponent(() => import("/@/layouts/default/setting/index.vue"), {
      loading: true
    })
  },
  props: {
    fixed: propTypes.bool
  },
  setup(props) {
    const { prefixCls } = useDesign("layout-header");
    const {
      getShowTopMenu,
      getShowHeaderTrigger,
      getSplit,
      getIsMixMode,
      getMenuWidth,
      getIsMixSidebar
    } = useMenuSetting();
    const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
      useRootSetting();

    const {
      getHeaderTheme,
      getShowFullScreen,
      getShowNotice,
      getShowContent,
      getShowBread,
      getShowHeaderLogo,
      getShowHeader,
      getShowSearch
    } = useHeaderSetting();

    const { getShowLocalePicker } = useLocale();

    const { getIsMobile } = useAppInject();

    const getHeaderClass = computed(() => {
      const theme = unref(getHeaderTheme);
      return [
        prefixCls,
        {
          [`${prefixCls}--fixed`]: props.fixed,
          [`${prefixCls}--mobile`]: unref(getIsMobile),
          [`${prefixCls}--${theme}`]: theme
        }
      ];
    });

    const getShowSetting = computed(() => {
      if (!unref(getShowSettingButton)) {
        return false;
      }
      const settingButtonPosition = unref(getSettingButtonPosition);

      if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
        return unref(getShowHeader);
      }
      return settingButtonPosition === SettingButtonPositionEnum.HEADER;
    });

    const getLogoWidth = computed(() => {
      if (!unref(getIsMixMode) || unref(getIsMobile)) {
        return {};
      }
      const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
      return { width: `${width}px` };
    });

    const getSplitType = computed(() => {
      return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
    });

    const getMenuMode = computed(() => {
      return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
    });

    return {
      prefixCls,
      getHeaderClass,
      getShowHeaderLogo,
      getHeaderTheme,
      getShowHeaderTrigger,
      getIsMobile,
      getShowBread,
      getShowContent,
      getSplitType,
      getSplit,
      getMenuMode,
      getShowTopMenu,
      getShowLocalePicker,
      getShowFullScreen,
      getShowNotice,
      getUseErrorHandle,
      getLogoWidth,
      getIsMixSidebar,
      getShowSettingButton,
      getShowSetting,
      getShowSearch
    };
  }
});
</script>
<style lang="less">
@import './index.less';
</style>
